import "./fanCollection.scss";
import "tippy.js/dist/tippy.css";
import "@/assets/styles/tooptip_thme.css";
import { Header } from "../header/header";
import { Card } from "../card/card";
import { Tag } from "../tag/tag";
import { useState } from "react";
import classNames from "classnames";
import { TextField } from "../textfield/textfield";
import { Button } from "../button/button";
import { Refresh } from "../svg/svg";
import { useExportExecl } from "@/utils/hook";
import { FanInfoTable } from "./fansInfoTable/fanInfoTable";
import Tippy from "@tippyjs/react";
import { ToolTipElement } from "./tooltipElement/tooltipElement";
const FansCollection = () => {
  // tag的active类名控制
  const [isActive, setIsActive] = useState(1);

  const barItemClassName = (payload) => {
    return classNames("bar_item", payload == isActive && "active");
  };

  const [tippyRef, setTippyRef] = useState<any>(null);

  const closeTippy = () => {
    if (tippyRef) {
      tippyRef?.hide();
    }
  };

  // xlsx数据
  const [xlsxData] = useState<any[]>([]);

  // 转为xlsx方法
  const exportExecl = useExportExecl();

  return (
    <>
      <div className="dashboard_fans_collection_box">
        <Card>
          <Header />
        </Card>
        <div className="dashboard_fans_collection_bar">
          <Tag className={barItemClassName(1)} onClick={() => setIsActive(3)}>
            tiktok
          </Tag>
        </div>
        <Card className="dashboard_action_box" radiusPostion="top">
          <TextField label="请输入关键词：" type="search" />
          <div className="dashboard_button_box">
            <Button label="采集数据" isLinear />
            <Button
              label="下载/导出Execl"
              isLinear
              onClick={() => exportExecl(xlsxData, "粉丝采集数据")}
            />
            <Tippy
              content={<ToolTipElement onClick={closeTippy} />}
              className="tooltip"
              theme="my-theme"
              trigger="click"
              placement="bottom"
              interactive
              ref={tippyRef}
              onClickOutside={closeTippy}
              onCreate={(instance) => {
                setTippyRef(instance);
              }}
            >
              <button className="tooltip_trigger">一键全选</button>
            </Tippy>
          </div>
          <p className="dashboard_refresh">
            数据预览
            <span>共36条数据预览只显示11条数据</span>
            <i>
              查看更多
              <Refresh />
            </i>
          </p>
        </Card>
        <div className="dashboard_fans_collections_table_box">
          <FanInfoTable />
        </div>
      </div>
    </>
  );
};

export default FansCollection;
